<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 客户列表</title>
    <link rel="shortcut icon" href="../content/static/img/favicon.ico">
    <link href="../content/css/common_modal.css" rel="stylesheet">
    <link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="../content/js/lib/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <link href="../content/js/lib/ztree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <link href="../content/static/js/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" />
    <style>
        .fa-female:before {
            color: #fb7cd5;
        }
        .fa-location-arrow:before {
            color: rebeccapurple;
        }
        .fa-mobile-phone:before, .fa-mobile:before{
            color: black;
        }
        .fa-map-marker:before {
            color: #1ab394;
        }
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }      
        table tr{ height:40px;}  
         #productTree {
            width: 320px;
            max-height: 376px;
            min-height: 32px;
            overflow-y: auto;
            padding: 10px 10px 0;
        }
        #proTree{
            width: 320px;
            max-height: 376px;
            min-height: 32px;
            overflow-y: auto;
            padding: 10px 10px 0;
        }
        .dropdown-ul{
            left: -173px !important;
            right: 0 !important;
            padding: 5px 5px!important;
        }
        .tree{
            height: 30px;
            display: block;
            line-height: 28px;
            position: relative;
            cursor: pointer;
            font-size: 12px;
            padding: 0px 5px;
            border-width: 1px;
            border-style: solid;
            border-color: rgb(221, 221, 221);
            border-image: initial;
            background: rgb(255, 255, 255);
            border-radius: 3px;
        }
        .projectDetaiTreeWrap {
            width: 320px;
            max-height: 500px;
            padding: 10px 10px 0;
            top: 260px !important;
        }
        .proTreeWrap {
            position: absolute;
            left: 110px !important;
            background: #fff;
            border: 1px solid #ccc;
        }.proTreeWrap .btn-wrap {
            margin: 10px 0;
            text-align: center;
            padding-top: 8px;
            border-top: 1px dashed #ccc;
        }
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li><a>商品信息</a></li>
                            <li><a>商品列表</a></li>
                        </ol>
                    </div>
                    <div class="content-wrapper">
                        <div class="search-condition">
                            <div>
                                <div class="filter-wrapper">
                                    <ul class="clearfix">
                                        <li class="filter-item ">
                                            <label>商品编号</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>商品名称</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>商品分类</label>
                                            <div class="fill-wrapper">
                                                <span class="treeBtn project">已选择</span>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>入库日期</label>
                                            <div>
                                                <div class="fill-wrapper fill-wrapper-auto">
                                                    <input id="costTimeStart" type="text" class="fill-item  revision-time"
                                                        readonly="readonly">
                                                </div>
                                                <div class="fill-desc">到</div>
                                                <div class="fill-wrapper fill-wrapper-auto">
                                                    <input id="costTimeEnd" type="text" class="fill-item  revision-time"
                                                        readonly="readonly">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>入库人</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>入库仓库</label>
                                            <div>
                                                <select v-select2 id="warehouse">
                                                    <option value='0'>全部</option>
                                                    <option v-for="item in warehouseList" v-bind:value="item.Value"
                                                        v-bind:selected="$index===0" v-text="item.Text"></option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="filter-item">
                                            <label class="checkbox-wrapper" style="width: 140px;"><input class="revision-checkbox"
                                                    type="checkbox" id="isEfficacious" /> 是否有效单</label>
                                        </li>
                                        <li class="filter-item">
                                            <a class="revision-btn revision-btn-search">搜索</a>
                                            <a href="javascript:;" class="more">更多<i class="revision-icon-more"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                            <div class="alert alert-info" style="margin-bottom: 0px">
                                <a class="revision-btn" v-on:click="addShow()">新增</a>
                                <a class="revision-btn" v-on:click="exportShow()">导入</a>
                                <a class="revision-btn" v-on:click="exportShow()">导出</a>&nbsp;&nbsp;
                                <span>总条数：<span>12 条</span></span>&nbsp;&nbsp;
                                <span>总计金额<span>528,00.00</span></span>&nbsp;&nbsp;
                                <span>实退金额<span>528,00.00</span></span>
                            </div>
                        </div>
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th><input class="revision-checkbox" type="checkbox"></th>
                                    <th>
                                        <div class="tooltip-demo">编号
                                            <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                                title="" data-original-title="该商品的唯一编码"></label>
                                        </div>
                                    </th>
                                    <th>商品名称</th>
                                    <th>属性</th>
                                    <th>基本单位</th>
                                    <th>进价(元)</th>
                                    <th>零售价格(元)</th>
                                    <th>批发价(元)</th>
                                    <th>最低售价(元)</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input class="revision-checkbox" type="checkbox">
                                    </td>
                                    <td>SP20181120000123</td>
                                    <td class="text-navy">后视镜</td>
                                    <td>件</td>
                                    <td>件</td>
                                    <td class="amount">50</td>
                                    <td class="amount">88</td>
                                    <td class="amount">78</td>
                                    <td class="amount">75</td>
                                    <td>已启用</td>
                                    <td>
                                        <a href="javascript:;" class="" v-on:click="detailShow()">详情</a>
                                        <a href="" class="">编辑</a>
                                        <a href="" class="">复制并新增</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 商品新增 -->
                <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style" v-bind:add-class="addModal.addClass">
                    <h4 slot="header">新增商品</h4>
                    <div slot="body" class="clearfix">
                        <div class="panel blank-panel">
                            <div class="panel-options">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a data-toggle="tab" href="#tab-4">扫码新增商品</a>
                                    </li>
                                    <li class=""><a data-toggle="tab" href="#tab-5" aria-expanded="false">导入新增商品</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="panel-body">
                                <div class="tab-content">
                                    <div id="tab-4" class="tab-pane active">
                                        <form class="form-horizontal" novalidate="novalidate">
                                            <div class="form-group" style="margin-bottom:0px">
                                                <div class="col-sm-4">
                                                    <input class="fill-item timeChoose" placeholder="请输入或扫描商品编号/条形码/序列号"
                                                        type="text" style="border:2px solid #444" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div id="tab-5" class="tab-pane">
                                        <a class="revision-btn" href="javascript:;">导入商品信息</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h3 class="panel-title">基本信息 </h3>
                        </div>
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <div class="form-group">
                                <label class="col-sm-1 control-label">条形码</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" type="text" placeholder="选填,扫描或录入条形码" />
                                </div>
                                <label class="col-sm-1 control-label">商品编号</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="系统自动生成" type="text" readonly />
                                </div>
                                <label class="col-sm-1 control-label">商品名称</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="商品名称" type="text" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">商品分类</label>
                                <div class="col-sm-3">
                                    <span class="tree project">已选择</span>
                                </div>
                                <label class="col-sm-1 control-label">单位</label>
                                <div class="col-sm-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="test_data">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu dropdown-ul" role="menu">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <label class="col-sm-1 control-label">规格</label>
                                <div class="col-sm-3">
                                    <input id="confirm_password" name="confirm_password" placeholder="选填，如“红色长款”" class="fill-item"
                                        type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">批次号</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" type="text" placeholder="批次号" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">商品图片</label>
                                <div class="col-sm-10">
                                    <div class="file-loading">
                                        <input id="file-es" multiple name="file-es[]" type="file">
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">商品属性<span class="title-tips">没有合适的属性？快去&nbsp;&nbsp;<a href="javascript:;">商品信息──>商品属性维护</a>&nbsp;&nbsp;页面设置吧</span></h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">型号</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" type="text" placeholder="选填" />
                                </div>
                                <label class="col-sm-1 control-label">品牌</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="品牌" type="text" readonly />
                                </div>
                                <label class="col-sm-1 control-label">颜色</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="颜色" type="text" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">自定义属性1</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" type="text" placeholder="自定义属性1" />
                                </div>
                                <label class="col-sm-1 control-label">自定义属性2</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="自定义属性2" type="text" readonly />
                                </div>
                                <label class="col-sm-1 control-label">自定义属性3</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="自定义属性3" type="text" />
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">附加信息 </h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">生产商</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" type="text" placeholder="选填,生产商" />
                                </div>
                                <label class="col-sm-1 control-label">生产地省</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="选填,生产地省" type="text" readonly />
                                </div>
                                <label class="col-sm-1 control-label">生产地市</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="选填,生产地市" type="text" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">所在地</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" type="text" placeholder="选填,所在地" />
                                </div>
                                <label class="col-sm-1 control-label">保质期</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="保质期" type="text" readonly />
                                </div>
                                <label class="col-sm-1 control-label">生产日期</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="规格" type="text" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">存储条件</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="存储条件" type="text" readonly />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">注意事项</label>
                                <div class="col-sm-7">
                                    <textarea id="ccomment" name="comment" class="form-control" style="height: 34px;"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">说明</label>
                                <div class="col-sm-7">
                                    <textarea id="ccomment" name="comment" class="form-control" style="height: 34px;"></textarea>
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">价格信息<span class="title-tips">已开启按客户等级定价 客户等级在客户管理处</span></h3>
                            </div>
                            <table class="table table-hover table-bordered" style="margin: 20px 0px">
                                <thead>
                                    <tr>
                                        <th>价格类型</th>
                                        <th>价格</th>
                                        <th>折扣</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>零售价(元)</td>
                                        <td><input type="text" class="fill-item amount" value="260" /></td>
                                        <td>100%</td>
                                    </tr>
                                    <tr>
                                        <td>批发价(元)</td>
                                        <td><input type="text" class="fill-item amount" value="2360" /></td>
                                        <td>100%</td>
                                    </tr>
                                    <tr>
                                        <td>最低售价(元)</td>
                                        <td><input type="text" class="fill-item amount" value="250" /></td>
                                        <td>100%</td>
                                    </tr>
                                    <tr>
                                        <td>等级价一(元)</td>
                                        <td><input type="text" class="fill-item amount" value="2360" /></td>
                                        <td>80%</td>
                                    </tr>
                                    <tr>
                                        <td>等级价二(元)</td>
                                        <td><input type="text" class="fill-item amount" value="250" /></td>
                                        <td>85%</td>
                                    </tr>
                                    <tr>
                                        <td>等级价三(元)</td>
                                        <td><input type="text" class="fill-item amount" value="2360" /></td>
                                        <td>90%</td>
                                    </tr>
                                    <tr>
                                        <td>等级价四(元)</td>
                                        <td><input type="text" class="fill-item amount" value="250" /></td>
                                        <td>95%</td>
                                    </tr>
                                    <tr>
                                        <td>进货价(元)</td>
                                        <td><input type="text" class="fill-item amount" value="200" /></td>
                                        <td>0%</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div>
                                <h3 class="panel-title">库存信息
                                    <input class="revision-checkbox" type="checkbox" style="margin-left: 720px"
                                        v-on:click="checkSame($event)">所有仓库预警值相同
                                </h3>
                            </div>
                            <div class="form-group" v-if="chkflg">
                                <label class="col-sm-2 control-label" style="width: 102px;">最低库存量</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="最低库存量" type="text" />
                                </div>
                                <label class="col-sm-2 control-label" style="width: 102px;">最高库存量</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="最高库存量" type="text" />
                                </div>
                            </div>
                            <table class="table table-hover table-bordered" style="margin: 20px 0px" v-if="!chkflg">
                                <thead>
                                    <tr>
                                        <th>仓库</th>
                                        <th>最低库存量</th>
                                        <th>最高库存量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>默认仓库</td>
                                        <td><input type="text" class="fill-item amount" value="160" /></td>
                                        <td><input type="text" class="fill-item amount" value="400" /></td>
                                    </tr>
                                    <tr>
                                        <td>A仓库</td>
                                        <td><input type="text" class="fill-item amount" value="160" /></td>
                                        <td><input type="text" class="fill-item amount" value="400" /></td>
                                    </tr>
                                    <tr>
                                        <td>B仓库</td>
                                        <td><input type="text" class="fill-item amount" value="160" /></td>
                                        <td><input type="text" class="fill-item amount" value="400" /></td>
                                    </tr>
                                    <tr>
                                        <td>C仓库</td>
                                        <td><input type="text" class="fill-item amount" value="160" /></td>
                                        <td><input type="text" class="fill-item amount" value="400" /></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div>
                                <h3 class="panel-title">其他信息 </h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">商品状态</label>
                                <div class="col-sm-4" style="margin-top: 6px;">
                                    <input type="radio" class="cus-radio" name="status" value="2" checked><span class="spanchk">启用</span>
                                    <input type="radio" class="cus-radio" name="status" value="1"> <span class="spanchk">禁用</span>
                                </div>
                                <label class="col-sm-2 control-label">是否有期初商品</label>
                                <div class="col-sm-4" style="margin-top: 6px;">
                                    <input type="radio" class="cus-radio" name="load" value="1"><span class="spanchk">是</span>
                                    <input type="radio" class="cus-radio" name="load" value="0" checked> <span class="spanchk">否</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">备注</label>
                                <div class="col-sm-7">
                                    <textarea id="ccomment" name="comment" class="form-control" style="height: 34px;"></textarea>
                                </div>
                            </div>
                            <div class="proTreeWrap projectDetaiTreeWrap none" style="width:320px;">
                                <div>
                                    <input type="text" class="fill-item" v-model="treeModel.searchText" style="display:inline;width:140px;" />
                                    <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;"
                                        v-on:click="treeModel.search">搜索</a>
                                    <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;"
                                        v-show="treeModel.searchResultMax>0" v-on:click="treeModel.searchNext">下一个</a>
                                </div>
                                <ul id="proTree" class="ztree" style="margin-left: -12px;"></ul>
                                <div class="btn-wrap">
                                    <a href="javascript:;" class="revision-btn-default width56">取消</a>
                                    <a href="javascript:;" class="revision-btn width56">确定</a>
                                </div>
                            </div>
                            <div v-if="radioflg">
                                <h3 class="panel-title">期初信息<span class="amount">(重要)</span> <span class="title-tips">在使用本软件前仓库中已有的商品库存，录入期初库存可以使后续成本价、毛利等值的计算更准确</span></h3>
                            </div>
                            <table class="table table-hover table-bordered" style="margin: 20px 0px" v-if="radioflg">
                                <thead>
                                    <tr>
                                        <th>仓库</th>
                                        <th>期初库存数量</th>
                                        <th>期初成本价（元）</th>
                                        <th>期初总金额（元）</th>
                                        <th>备注</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>默认仓库</td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                    </tr>
                                    <tr>
                                        <td>A仓库</td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                    </tr>
                                    <tr>
                                        <td>B仓库</td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                    </tr>
                                    <tr>
                                        <td>C仓库</td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                        <td><input type="text" class="fill-item amount" /></td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div slot="footer" style="text-align:center">
                        <a href="javascript:;" class="revision-btn"> 保存</a>
                        <a href="javascript:;" class="revision-btn-default" v-on:click="this.addModal.close()"> 取消</a>
                    </div>
                </modal>
                <!-- 商品详情 -->
                <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
                    <h4 slot="header">【120台按摩器】 详情</h4>
                    <div slot="body" class="clearfix">
                        <div class="approve-detail-modal-title">
                            <h2>商品详情</h2>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li style="width: 15%;">
                                <img style="height: 80px;width: 80px;margin-bottom: 6px;margin-top: 6px;float: left;"
                                    src="../content/static/img/no_pic.png">
                            </li>
                            <li style="width: 15%;">
                                <img style="height: 80px;width: 80px;margin-bottom: 6px;margin-top: 6px;float: left;"
                                    src="../content/static/img/no_pic.png">
                            </li>
                            <li style="width: 15%;">
                                <img style="height: 80px;width: 80px;margin-bottom: 6px;margin-top: 6px;float: left;"
                                    src="../content/static/img/no_pic.png">
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">基本信息 </h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li style="width: 25%;">
                                <em>商品编号</em>
                                <span>XSD20181220005</span>
                            </li>
                            <li style="width: 25%;">
                                <em>入库时间</em>
                                <span>2018-12-22</span>
                            </li>
                            <li>
                                <em>入库人</em>
                                <span>王老板</span>
                            </li>
                            <li class="w-100">
                                <em>商品名称</em>
                                <span>120台按摩器</span>
                            </li>
                            <li class="w-100">
                                <em>商品分类</em>
                                <span>商品分类->默认分类</span>
                            </li>
                            <li  style="width: 25%;">
                                <em>商品状态</em>
                                <span class="text-navy">已启用</span>
                            </li>
                            <li class="w-100">
                                <em>单位</em>
                                <span>台</span>
                            </li>
                            <li class="w-100">
                                <em>规格</em>
                                <span>20*180</span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">价格信息</h3>
                        </div>
                        <table class="table table-bordered" style="margin-top: 10px">
                            <thead>
                                <tr>
                                    <th colspan="2">价格类别</th>
                                    <th>类别/台</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td rowspan="3">销售</td>
                                    <td>零售价（元）</td>
                                    <td>260.00</td>
                                </tr>
                                <tr>
                                    <td>批发价（元）</td>
                                    <td>230.00</td>
                                </tr>
                                <tr>
                                    <td>最低售价（元）</td>
                                    <td>230.00</td>
                                </tr>
                                <tr>
                                    <td>进货</td>
                                    <td>进货价（元）</td>
                                    <td>200.00</td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <h3 class="panel-title">库存信息</h3>
                        </div>
                        <table class="table table-hover table-bordered" style="margin-top: 10px">
                            <thead>
                                <tr>
                                    <th>仓库</th>
                                    <th>最低库存量</th>
                                    <th>最高库存量</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>默认仓库</td>
                                    <td>50</td>
                                    <td class="text-navy">800</td>
                                </tr>
                                <tr>
                                    <td>合肥汽贸</td>
                                    <td>50</td>
                                    <td class="text-navy">800</td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <h3 class="panel-title">其他信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>序列号</em>
                                <span>建设银行</span>
                            </li>
                            <li>
                                <em>条形码</em>
                                <span class="amount"></span>
                            </li>
                            <li class="w-100">
                                <em>备注</em>
                                <span class="amount">10000.00</span>
                            </li>
                        </ul>
                    </div>
                </modal>
            </div>
            <div class="treeWrap projectTreeWrap none" style="width:320px;">
                <div>
                    <input type="text" class="fill-item" v-model="treeModel.searchText" style="display:inline;width:140px;" />
                    <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;" v-on:click="treeModel.search">搜索</a>
                    <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;" v-show="treeModel.searchResultMax>0"
                        v-on:click="treeModel.searchNext">下一个</a>
                </div>
                <ul id="productTree" class="ztree" style="margin-left: -12px;"></ul>
                <div class="btn-wrap">
                    <a href="javascript:;" class="revision-btn-default width56">取消</a>
                    <a href="javascript:;" class="revision-btn width56">确定</a>
                </div>
            </div>

        </div>
    </div>
    <script src="../content/js/lib/vue/vue.min.js"></script>
    <script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../content/static/js/plugins/switchery/switchery.js"></script>
    <script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../content/js/lib/vue/vue-modal.js"></script>
    <script src="../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../content/js/common.js"></script>
    <script src="../content/js/lib/vue/select2.js"></script>
    <script src="../content/js/lib/ztree/js/jquery.ztree.all.min.js"></script>
    <script src="../content/static/js/plugins/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="../content/static/js/plugins/bootstrap-fileinput/js/plugins/sortable.js"></script>
    <script src="../content/static/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
    <script src="../content/static/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#warehouse").select2({
                width: "220px"
            });
            $('.treeBtn').click(function () {
                if ($(this).hasClass('project')) {
                    $treeWrap = $('.projectTreeWrap');
                }
                var $this = $(this),
                    pos = $this.offset();
                if ($treeWrap.hasClass('none')) {
                    $treeWrap.css({
                        left: pos.left,
                        top: pos.top + $this.height()
                    }).removeClass('none');
                } else {
                    $treeWrap.addClass('none');
                }
            });
            $('.treeWrap .btn-wrap a').click(function (e) {
                var targetClass = e.target.className;
                if (targetClass.indexOf('btn-success') > -1) {
                    vm.projectId.paramId = vm.projectId.checkedId;
                    if (vm.projectId.paramId === '') {
                        $('.treeBtn.project').html('未选择').addClass('no-project');
                    } else {
                        $('.treeBtn.project').html('已选择').removeClass('no-project');
                    }
                }
                $('.treeWrap').addClass('none');
            });

        })
        var vmData = {
            addModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.addModal.show = false;
                }
            },
            detailModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
            treeProject: '',
            treeIds: {
                checkedId: '',
                paramId: ''
            },
            treeModel: {
                searchText: '',
                searchResultMax: 0,
                search: function () {
                    count = 0;
                    treeObj = [];
                    var lastName = vm.treeModel.searchText;
                    treeObj = $.fn.zTree.getZTreeObj("productTree");
                    treeObj.cancelSelectedNode();
                    //通过名称模糊搜索，也可通过Id查找
                    nodes = treeObj.getNodesByParamFuzzy("text", lastName, null);
                    treeObj.selectNode(nodes[0]);
                    vm.treeModel.searchResultMax = nodes.length - 1;
                },
                searchNext: function searchNext() {
                    count++;
                    treeObj.selectNode(nodes[count]);
                    if (count == nodes.length - 1) {
                        count = -1;
                    }
                }
            },
            chkflg: false,
            radioflg: false,
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {
                $('input[name="load"]').click(function () {
                    if ($(this).val() == 1)
                        vm.$set("radioflg", true);
                    else
                        vm.$set("radioflg", false);
                });
            },
            addShow: function () {
                vm.addModal.show = true;
                vm.loadTree(1, 2, "#proTree");
                $('#file-es').fileinput({
                    language: 'zh',
                    uploadUrl: '#',
                    allowedFileExtensions: ['jpg', 'png', 'gif']
                });
                $('.tree').click(function () {
                    if ($(this).hasClass('project')) {
                        $treeWrap = $('.projectDetaiTreeWrap');
                    }
                    var $this = $(this),
                        pos = $this.offset();
                    if ($treeWrap.hasClass('none')) {
                        $treeWrap.css({
                            left: pos.left,
                            top: pos.top + $this.height()
                        }).removeClass('none');
                    } else {
                        $treeWrap.addClass('none');
                    }
                });
                $('.proTreeWrap .btn-wrap a').click(function (e) {
                    var targetClass = e.target.className;
                    if (targetClass.indexOf('btn-success') > -1) {
                        vm.projectId.paramId = vm.projectId.checkedId;
                        if (vm.projectId.paramId === '') {
                            $('.tree.project').html('未选择').addClass('no-project');
                        } else {
                            $('.tree.project').html('已选择').removeClass('no-project');
                        }
                    }
                    $('.proTreeWrap').addClass('none');
                });
                var testdataBsSuggest = $("#test_data").bsSuggest({
                    indexId: 2,
                    indexKey: 1,
                    data: {
                        "value": [{
                            "id": "0",
                            "word": "板",
                            "description": "板"
                        }, {
                            "id": "1",
                            "word": "包",
                            "description": "包"
                        }, {
                            "id": "2",
                            "word": "杯",
                            "description": "杯"
                        }, {
                            "id": "3",
                            "word": "袋",
                            "description": "袋"
                        }, {
                            "id": "4",
                            "word": "个",
                            "description": "个"
                        }, {
                            "id": "5",
                            "word": "公斤",
                            "description": "公斤"
                        }, {
                            "id": "6",
                            "word": "罐",
                            "description": "罐"
                        }, {
                            "id": "7",
                            "word": "毫升",
                            "description": "毫升"
                        }, {
                            "id": "8",
                            "word": "件",
                            "description": "件"
                        }, {
                            "id": "9",
                            "word": "斤",
                            "description": "斤"
                        }, {
                            "id": "10",
                            "word": "卷",
                            "description": "卷"
                        }, {
                            "id": "11",
                            "word": "卡",
                            "description": "卡"
                        }, {
                            "id": "12",
                            "word": "克",
                            "description": "克"
                        }, {
                            "id": "13",
                            "word": "粒",
                            "description": "粒"
                        }, {
                            "id": "14",
                            "word": "米",
                            "description": "米"
                        }, {
                            "id": "15",
                            "word": "瓶",
                            "description": "瓶"
                        }, {
                            "id": "16",
                            "word": "升",
                            "description": "升"
                        }, {
                            "id": "17",
                            "word": "双",
                            "description": "双"
                        }, {
                            "id": "18",
                            "word": "台",
                            "description": "台"
                        }, {
                            "id": "19",
                            "word": "套",
                            "description": "套"
                        }, {
                            "id": "20",
                            "word": "条",
                            "description": "条"
                        }, {
                            "id": "21",
                            "word": "筒",
                            "description": "筒"
                        }, {
                            "id": "22",
                            "word": "箱",
                            "description": "箱"
                        }, {
                            "id": "23",
                            "word": "张",
                            "description": "张"
                        }, {
                            "id": "24",
                            "word": "支",
                            "description": "支"
                        }],
                        "defaults": ""
                    }
                });
            },
            checkSame: function (e) {
                var target = e.target,
                    checkStatus = target.checked;
                if (checkStatus) {
                    vm.$set("chkflg", true);
                } else {
                    vm.$set("chkflg", false);
                }
            },
            detailShow: function () {
                vm.detailModal.show = true;
            },
            setCheckId: function (checkNodes, type) {
                var treeNode = [];
                checkNodes = checkNodes || [];
                var len = checkNodes.length,
                    arr = [];
                while (len) {
                    var treeChildNode = {
                        Id: "",
                        ChildIds: []
                    };
                    var item = checkNodes[len - 1],
                        status = item.getCheckStatus();
                    if (status.checked) {
                        arr.push(item.id);
                        treeChildNode.Id = item.id;
                        if (item.ChildNodes != undefined) {
                            for (var i = 0; i < item.ChildNodes.length; i++) {
                                if (item.ChildNodes[i].getCheckStatus().checked == true)
                                    treeChildNode.ChildIds.push(item.ChildNodes[i].id);
                            }
                        }
                    }
                    treeNode.push(treeChildNode);
                    len--;
                }
                vm.treeProject = JSON.stringify(treeNode);
                vm[type].checkedId = arr.join(',');
            },

        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.loadTree(1, 2, "#productTree");
        vm.init();
    </script>
</body>

</html>